<template>
  <view class="content">
    <view class="searchBox" :style="'padding-top:' + statusBarHeight + 'px;'">
      <text class="icon" @tap="goBack">&#xe64e;</text>
      <view class="search" @tap="goDeliverySearch">
        <u-search :disabled="true" style="flex: 1;" placeholder="请输入内容" v-model="searchValue" :show-action="false" :height="72"
          class="searchInput" input-align="left"></u-search>
        <view class="searchBtn">搜索</view>
        <!--  @tap="searchInfo" -->
      </view>
    </view>
    <view class="searchList" v-if="deliveryList.length > 0">
      <view v-for="(item, index) in deliveryList" :key="index" class="list" @tap="goDetail(item)">
        <view class="listTop">
          <view style="width: 156rpx; height: 156rpx;position:relative;overflow: hidden;">
            <image style="width: 156rpx; border-radius: 12rpx;" :src="item.merchantHead"
              mode="widthFix" />
            <view v-if="item.businessStatus == 1 || item.isInOpenTime == 0"
              style="width:100%; height:30%;position:absolute;bottom:0;left:0;text-align:center;color:white;background-color:rgba(0,0,0,0.4);">
              已打烊
            </view>
          </view>
          <view class="listTopRight">
            <view class="listTitle">
              <view style="width: 300rpx;  overflow:hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            ">{{ item.merchantName }}</view>
              <view v-if="item.distance < 1" class="titleTag"> {{ parseFloat(item.distance*1000).toFixed(2) }} m</view>
              <view v-if="item.distance > 1" class="titleTag">约{{ parseFloat(item.distance).toFixed(2) }}km</view>
            </view>
            <view class="listNum">
              <view class="listSales">
                <image src="../static/image/pagesDelivery/Star.png" v-show="indexStar + 1 < item.merchantScore"
                  v-for="(itemStar, indexStar) in Math.floor(item.merchantScore)" :key="indexStar" mode="scaleToFill" />
                <image src="../static/image/pagesDelivery/halfwayStar.png" v-show="item.merchantScore % 1 !== 0"
                  mode="scaleToFill" />
                <text>总销{{ item.merchantSalesVolume }}</text>
              </view>
              <view class="listTime">
                <!-- <text>{{ item.time }}分钟</text> -->

              </view>
            </view>
            <!-- <view class="listTag">
							<view class="acclaimTag1 acclaim1">好吃不贵</view>
							<view class="acclaimTag1 acclaim2">价格实惠</view>
							<view class="acclaimTag2 acclaim3">口碑好</view>
							<view class="acclaimTag2 acclaim4">种类全</view>
						</view> -->
          </view>
        </view>
        <view class="listGoods">
          <view v-for="(itemGoods, indexGoods) in item.appProducts" :key="indexGoods" class="itemGoods">
            <view class="goodsImg">
              <image :src="itemGoods.productImg" mode="widthFix" />
            </view>
            <view class="goodsTitle">{{ itemGoods.productName }}</view>
            <view class="goodsPrice">
              ￥
              <text>{{ (itemGoods.productPrice / 100).toFixed(2) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-empty mode="search" v-else style="margin-top: 500rpx;"></u-empty>
  </view>
</template>

<script>
let that = this
import { selectjdwxMerchantList } from '@/api/common'
export default {
  data() {
    return {
      searchValue: '',
      statusBarHeight: "",
      deliveryList: [],
      latAndLong: {},
      latitude: '',
      longitude: '',
      pageNum: 1,
      pageSize: 10,
      pagesStatus: false,
      tabbarid: 0,
      merchantTakeout: 0
    }
  },
  onReady() {
  },
  onLoad(e) {
    console.log('看看传过来的e是什么东西', e)
    this.latAndLong = JSON.parse(e.latAndLong)
    this.latitude = this.latAndLong.latitude
    this.longitude = this.latAndLong.longitude
    this.tabbarid = e.tabbarId
    this.merchantTakeout = e.merchantTakeout
    console.log('看看tabbarid', this.tabbarid)
    console.log('看看这个经纬度', this.latAndLong)
    this.searchValue = e.searchValue ? e.searchValue : ''
    that = this
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    this.getsearch()
  },
  methods: {
    goDeliverySearch() {
      // uni.navigateBack({
      // 	delta:0,
      // })
      
      uni.redirectTo({
        url: '/pagesDelivery/deliverySearch?tabbarId=' + this.tabbarid + '&latAndLong=' + JSON.stringify(that.latAndLong) + '&merchantTakeout=' + this.merchantTakeout + '&searchValue=' + this.searchValue
      })
    },
    goBack() {
      uni.navigateBack({ delta: 1 })
    },
    goDetail(item) {
      console.log(this.merchantTakeout)
      if (this.merchantTakeout == 1) {
        console.log('111111111111')
        uni.navigateTo({
          url: '/pagesDelivery/deliveryDetail?detailid=' + item.merchantId + '&distance=' + item.distance
        })
      } else if (this.merchantTakeout == 2) {
        console.log('333333333333333')
        uni.navigateTo({
          url: '/pagesHealth/goHistoryDetail?detailid=' + item.merchantId + '&distance=' + item.distance + '&latAndLong=' + JSON.stringify(that.latAndLong)
        })
      } else if (this.merchantTakeout == 3) {
        console.log('333333333333333')
        uni.navigateTo({
          url: '/pagesAgriculture/agricultureDetail?id=' + item.merchantId + '&distance=' + item.distance
        })
      } else if (this.merchantTakeout == 4) {
        console.log('44444444444')
        uni.navigateTo({
          url: '/pagesMaintain/maintainDetail?id=' + item.merchantId + '&distance=' + item.distance
        })
      }

    },
    getsearch() {
      console.log('111111')
      let obj = {
        lng: this.longitude,
        lat: this.latitude,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        merchantName: this.searchValue,
        productName: this.searchValue,
        merchantTakeout: this.merchantTakeout,
        merchantTypeId: this.tabbarid//tabbar里的分类(儿子)
      }
      selectjdwxMerchantList(obj).then(res => {
        // console.log(res,'看看这个res是什么')
        // this.deliveryList = res.data
        console.log(res.data.length)
		    console.log('搜索数据',res.data)
        if (this.pageNum === 1) {
          this.deliveryList = res.data
        } else {
          this.deliveryList = this.deliveryList.concat(res.data)
        }
        if (res.data.length < 6) {
          this.pagesStatus = false
        } else {
          this.pagesStatus = true
        }
      })
    }
  },
  onReachBottom() {
    console.log("触底");
    // 模拟的请求数据
    if (this.pagesStatus) {
      this.pageNum++
      this.getsearch()
    }
  },
}
</script>

<style scoped lang="scss">
.content {
  background: #F5F5F5;
  min-height: 100vh;
}

.searchBox {
  padding: 32rpx;
  background: #E6E6E6;
  display: flex;
  align-items: center;

  .search {
    display: flex;
    align-items: center;
    flex: 1;
    background: white;
    border-radius: 84rpx;
    margin-left: 16rpx;

    .searchBtn {
      padding: 16rpx 40rpx;
      color: #D12C25;
    }
  }
}

.searchList {
  .list {
    background: white;
    border-radius: 8rpx;
    padding: 24rpx;
    margin-bottom: 10rpx;

    .listTop {
      display: flex;

      image {
        width: 156rpx;
        height: 156rpx;
        border-radius: 6rpx;
      }

      .listTopRight {
        margin-left: 24rpx;
        flex: 1;

        .listTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;

          text {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #000000;
            line-height: 44rpx;
            font-style: normal;
          }

          .titleTag {
            width: fit-content;
            height: 36rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #A1A2B2;
            font-style: normal;
            border-radius: 8rpx;
            white-space: nowrap;
          }
        }

        .listNum {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #999999;
          height: 36rpx;
          font-style: normal;
          margin: 18rpx 0;

          .listSales {
            display: flex;
            align-items: center;

            image {
              width: 24rpx;
              height: 22rpx;
              margin-right: 4rpx;
            }

            text {
              margin-left: 12rpx;
            }
          }

          .listTime {
            display: flex;
            align-items: center;

            .listKm {
              margin-left: 12rpx;
            }
          }
        }

        .listTag {
          display: flex;
          align-items: center;

          .acclaimTag1 {
            width: 96rpx;
            height: 28rpx;
            line-height: 28rpx;
            font-family: PingFang SC, PingFang SC;
            border-radius: 18rpx;
            font-weight: 400;
            font-size: 20rpx;
            text-align: center;
            font-style: normal;
            margin-right: 12rpx;
          }

          .acclaimTag2 {
            width: 76rpx;
            height: 28rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            line-height: 28rpx;
            text-align: center;
            font-style: normal;
            border-radius: 18rpx;
            margin-right: 12rpx;
          }

          .acclaim1 {
            background: rgba(255, 0, 0, 0.1);
            color: #FF0000;
          }

          .acclaim2 {
            background: rgba(0, 87, 255, 0.1);
            color: #0057FF;
          }

          .acclaim3 {
            color: #16D356;
            background: rgba(22, 211, 86, 0.1);
          }

          .acclaim4 {
            color: #FFC123;
            background: rgba(255, 193, 35, 0.1);
          }
        }
      }
    }

    .listGoods {
      display: flex;
      overflow-x: auto;
      margin-top: 24rpx;

      .itemGoods {
        width: 156rpx;
        margin-right: 20rpx;
        flex-shrink: 0;
        
        .goodsImg{
          width: 100%;
          height: 132rpx;
          border-radius: 12rpx;
          overflow: hidden;
        }

        image {
          width: 100%;
          border-radius: 12rpx;
          min-height: 132rpx;
          // height: 132rpx;
          // border-radius: 12rpx;
          // object-fit: cover;
          // flex: 1;
        }

        .goodsTitle {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
          line-height: 33rpx;
          font-style: normal;
          margin-top: 18rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          /* 定义文本的行数 */
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .goodsPrice {
          font-size: 20rpx;
          font-family: PingFang SC, PingFang SC;
          color: #D12C25;
          font-style: normal;

          text {
            font-size: 28rpx;
          }
        }
      }
    }
    .listGoods::-webkit-scrollbar {
      display: none;
    }
  }
}

::v-deep .searchInput .u-content {
  background-color: white !important;
  padding-right: 0 !important;

}

::v-deep .searchInput .u-input {
  background-color: white !important;
  color: #000000;
}

::v-deep .searchInput .u-input text {
  color: #000000;
}

.searchList {
  padding: 24rpx 32rpx;
}
</style>
